<template>
    <div class="box">
        <div class="top">
            <h1>个人中心</h1>
        </div>
        <div class="content" v-if="userInfo">
           <div class="con">
            <span>管理员id:{{ userInfo.id }}</span>
           </div>

           <div class="con">
            <span>账号:{{ userInfo.account }}</span>
           </div>

            <div class="con">
                <span>用户组:{{ userInfo.userGroup }}</span>
            </div>

            <div class="con">
                <span>创建时间：{{dataTime( userInfo. ctime)}}</span>
            </div>

            <div class="con1">
                <p>管理员头像：</p>
                <!-- 正方形可以添加头像 -->
                <el-upload 
                    :action="'/api/users/avatar_upload?id='+userInfo.id" 
                    list-type="picture-card"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    style="margin-top: 10px;"
                >
                    <!-- 添加 style 属性控制头像大小 -->
                    <img v-if="userInfo.imgUrl" :src="serverUrl+userInfo.imgUrl" alt="头像" style="width: 150px; height: 150px;object-fit: cover;">
                    <div class="el-upload__text">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__hint"></div>
                    </div>
                </el-upload>
                
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { accountInfo, avatarEdit } from '../api/account';
import { serverUrl } from '../utils/common';
import { useRouter } from 'vue-router';
import dayjs from 'dayjs';
const router = useRouter();


const userInfo = ref(null);
const user = JSON.parse(sessionStorage.getItem('user'));
console.log(user);


const dataTime = (time) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
};

const getPersonalInfo = async () => {
    let{id} = JSON.parse(sessionStorage.getItem('user'));
    const res = await accountInfo({id});
    userInfo.value = res.accountInfo;
    console.log(userInfo.value);
};
getPersonalInfo();

const beforeAvatarUpload = (file) => {
    console.log(file);
    if(!file.type.includes('image/')){
        ElMessage({
            type:'error',
            message:'请上传图片'
        })   
        return false;
    }
    if(file.size > 1024 * 1024 * 2){
        ElMessage({
            type:'error',
            message:'图片大小不能超过2M'
        }) 
        return false;
    }
}

const handleAvatarSuccess = () => {
    router.go(0);
    getPersonalInfo();
}
</script>

<style scoped>
.box {
    width: 100%;
    height: 100%;
    /* display: flex; */
    background-color: #fff;
    border-radius: 6px;
}
.top {
    width: 100%;
    height: 6%;
    font-size: 18px;
    /* font-weight: bold; */
    border-bottom: 1px solid #888787;
}
.top h1{
    margin-left: 20px;
    line-height: 40px;
}
.content {
    width: 96%;
    height: 94%;
    display: flex; 
    flex-direction: column;
    margin: 0 auto;
}
.con {
    width: 100%;
    /* height: 10%; */
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    border-bottom: #888787 1px solid;
}
.con1 {
    width: 100%;
    /* height: 10%; */
    display: flex;
    flex-direction: column;
    margin-top: 20px; 
}
</style>